<template>
	<view class="comment-list">
		<view class="comment-warp" v-if="list.length==0">
			<image src="https://www.innovationgloble.com/wxs/img/wx/no-comment-sign.png"></image>
			<view @click="openComment(1)">暂无评论，<span>点击抢沙发</span></view>
		</view>
		<block v-else>
			<view class="item" v-if="pageAll">
				<image class="l" :src="item.linkUserAccountHead?item.linkUserAccountHead:'https://www.innovationgloble.com/wxs/img/wx/expert-head.png'"
				 ></image>
				<view class="r">
					<view class="write" @click="openComment(1)">
						写下您的评论
					</view>
				</view>
			</view>
			<view class="item comment_fir" v-for="(item,index) in list" :key='index'>
				<image class="l" :src="item.linkUserAccountHead?item.linkUserAccountHead:'https://www.innovationgloble.com/wxs/img/wx/expert-head.png'"
				 ></image>

				<view class="r">
					<!-- 一级评论 -->
					<view>
						<view class="name_rate">
							<view class="name">
								{{item.linkUserName}}
								<image v-if="item.vipLevel=='VIP0'" class="vip_img" src="https://www.innovationgloble.com/wxs/img/wx/vip0.png" mode="heightFix"></image>
								<image v-else-if="item.vipLevel=='VIP1'" class="vip_img" src="https://www.innovationgloble.com/wxs/img/wx/vip1.png"
								 mode="heightFix"></image>
								<image v-else-if="item.vipLevel=='VIP2'" class="vip_img" src="https://www.innovationgloble.com/wxs/img/wx/vip2.png"
								 mode="heightFix"></image>
								<image v-else-if="item.vipLevel=='VIP3'" class="vip_img" src="https://www.innovationgloble.com/wxs/img/wx/vip3.png"
								 mode="heightFix"></image>
								<image v-else-if="item.vipLevel=='VIP4'" class="vip_img" src="https://www.innovationgloble.com/wxs/img/wx/vip4.png"
								 mode="heightFix"></image>
								<image v-else-if="item.vipLevel=='VIP5'" class="vip_img" src="https://www.innovationgloble.com/wxs/img/wx/vip5.png"
								 mode="heightFix"></image>
								<image v-else-if="item.vipLevel=='VIP6'" class="vip_img" src="https://www.innovationgloble.com/wxs/img/wx/vip6.png"
								 mode="heightFix"></image>
								<image v-else class="vip_img" src="https://www.innovationgloble.com/wxs/img/wx/vip.png" mode="heightFix"></image>
								<text class="time">{{item.createTime}}</text>
							</view>
							<view class="good" @click="Thumb(item)">
							<image  v-if="item.tags.flag==1" src="https://www.innovationgloble.com/wxs/img/wx/kcxcx/img/need/thumbs-up-select.png" mode="widthFix"></image>
							<image  v-else src="https://www.innovationgloble.com/wxs/img/wx/kcxcx/img/need/thumbs-up.png" mode="widthFix"></image>
								{{item.tags.count}}
							</view>
						</view>
						<view class="notes">
							{{item.commentContent}}
						</view>
						<view class="keyWords">
							<view class="keyWordsL">
								<text @click="openComment(2,item.linkUserName,item)">回复</text>
								<block v-if="item.levelTwoComments.length!=0&&item.levelTwoComments!=null">
									<text>·</text>
									<text @click="hiddenSec(index)" v-if="isChecked[index]">收起</text>
									<text @click="showSec(index)" v-else>展开{{item.levelTwoComments.length}}条回复</text>
								</block>
							</view>

							<view class="more" @click="openPup(item)">
								···
							</view>
						</view>
					</view>
					<!-- 二级评论 -->
					<view class="comment_sec" :class="item.levelTwoComments.length>0&&isChecked[index]?'show':''" v-for="(data,i) in item.levelTwoComments"
					 :key='i'>
						<image class="l" :src="data.myHead?data.myHead:'https://www.innovationgloble.com/wxs/img/wx/expert-head.png'"
						  ></image>

						<view class="r">
							<view>
								<view class="name_rate">
									<view class="name">
										{{data.myName}}
										<image v-if="data.vipLevel=='VIP0'" class="vip_img" src="https://www.innovationgloble.com/wxs/img/wx/vip0.png" mode="heightFix"></image>
										<image v-else-if="data.vipLevel=='VIP1'" class="vip_img" src="https://www.innovationgloble.com/wxs/img/wx/vip1.png"
										 mode="heightFix"></image>
										<image v-else-if="data.vipLevel=='VIP2'" class="vip_img" src="https://www.innovationgloble.com/wxs/img/wx/vip2.png"
										 mode="heightFix"></image>
										<image v-else-if="data.vipLevel=='VIP3'" class="vip_img" src="https://www.innovationgloble.com/wxs/img/wx/vip3.png"
										 mode="heightFix"></image>
										<image v-else-if="data.vipLevel=='VIP4'" class="vip_img" src="https://www.innovationgloble.com/wxs/img/wx/vip4.png"
										 mode="heightFix"></image>
										<image v-else-if="data.vipLevel=='VIP5'" class="vip_img" src="https://www.innovationgloble.com/wxs/img/wx/vip5.png"
										 mode="heightFix"></image>
										<image v-else-if="data.vipLevel=='VIP6'" class="vip_img" src="https://www.innovationgloble.com/wxs/img/wx/vip6.png"
										 mode="heightFix"></image>
										<image v-else class="vip_img" src="https://www.innovationgloble.com/wxs/img/wx/vip.png" mode="heightFix"></image>
										<text class="time">{{data.createTime}}</text>
									</view>
									<view class="good" @click="Thumb(data)">
									<image v-if="data.tags.flag==1" src="https://www.innovationgloble.com/wxs/img/wx/kcxcx/img/need/thumbs-up-select.png" mode="widthFix"></image>
									<image v-else src="https://www.innovationgloble.com/wxs/img/wx/kcxcx/img/need/thumbs-up.png" mode="widthFix"></image>
										{{data.tags.count}}
									</view>
								</view>
								<view class="notes">
									{{data.commentContent}}
								</view>
								<view class="keyWords">
									<text @click="openComment(2,data.myName,data)">回复</text>

									<view class="more" @click="openPup(data)">
										···
									</view>
								</view>

							</view>
						</view>
					</view>

				</view>

			</view>
			<view class="nomore" v-if="isLastPage&&pageAll">
				已显示全部评论
			</view>
			<view class="getMore" v-if="pageAll&&!isLastPage" @click="getMore">
				查看更多
			</view>
		</block>
		<!--<ygc-comment ref="ygcComment" :placeholder="ygcPlaceholder" @pubComment="pubComment"></ygc-comment>-->
		<!-- 评论输入框 -->
		<msgInput  ref='msgInputRef' :placeholder="ygcPlaceholder" @pubComment="pubComment"></msgInput>
		<uni-popup ref="popup" type="bottom">
			<view class="popup-win">
				<view @click="del" v-if="sendData.canDel">
					删除
				</view>
				<view @click="openPuptTip" v-else>
					举报
				</view>
				
				<view @click="closePup">
					取消
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="popuptTip" type="center">
			<view class="popuptip-win">
				<view class="popuptip-win-title">
					举报此人
				</view>
				<view class="popuptip-win-check">
					<view class="popuptip-win-check-item" v-for="(item,index) of reportData" :key="index" @click="checkReport(item.value)">
						<icon type="success" size="16" color='#008BFF' v-if="reportType==item.value"></icon>
						<icon type="circle" size="16" v-else></icon>
						{{item.name}}
					</view>
				</view>
				<cove-view v-if='reportType==4'>
					<textarea v-model="reportTxt" placeholder="请简要描述反馈内容" placeholder-style="color:#BFBFBF;font-size:30rpx" />
					</cove-view>
				<view class="popuptip-win-btn">
					<view class="popuptip-win-btn-l" @click="closePuptTip">
						取消
					</view>
					<view class="popuptip-win-btn-r" @click="report">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	//import ygcComment from '@/components/ygc-comment/ygc-comment.vue';
	import msgInput from '@/components/msg-input.vue';
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			uniPopup,
			//ygcComment
			msgInput
		},
		data() {
			return {
				isChecked: [],
				commentLvl: '',
				ygcPlaceholder: '发布评论',
				sendData: {}, //提交传递信息
				reportData: [{
						value: 1,
						name: '营销广告'
					}, {
						value: 2,
						name: '恶意攻击谩骂'
					},
					{
						value: 3,
						name: '淫秽色情'
					},
					{
						value: 4,
						name: '我要反馈'
					}
				],
				reportType: 1,
				reportTxt:''
			}
		},
		computed: {
			...mapState('userStore', ['mainAccount']),
		},
		props: {
			list: {
				type: Array,
				default: function() {
					return []
				}
			},
			baseUrl: {
				type: String,
				default: ''
			},
			pid: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: ''
			},
			isLastPage: {
				type: Boolean,
				default: false
			},
			hasLogin: {
				type: Boolean,
				default: true
			},
			//控制全部页面相关展示
			pageAll: {
				type: Boolean,
				default: true
			},
		},
		methods: {
			//展开更多回复
			showSec(v) {
				// if(this.pageAll) {
				// 	if (!this.hasLogin) {
				// 		uni.navigateTo({
				// 			url: '/pagesA/login/login'
				// 		});
				// 		return false;
				// 	}
				// 	uni.navigateTo({
				// 		url: '/pages/comment-all/comment-all?id='+this.pid+'&type='+this.type
				// 	});
				// 	return
				// }
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pagesA/login/login'
					});
					return false;
				}
				this.$set(this.isChecked, v, true)
			},
			hiddenSec(v) {
				this.$set(this.isChecked, v, false)
			},
			// 打开评论弹窗
			openComment(v, name, data) {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pagesA/login/login'
					});
					return false;
				}
				if(v===1){
					if(!this.mainAccount){
						uni.showToast({
							title:'子账号没有权限',
							icon:'none'
						})
						return false
					}
				}
				if(v===2){
					if(!this.mainAccount){
						uni.showToast({
							title:'子账号没有权限',
							icon:'none'
						})
						return false
					}
				}
				if (name) {
					this.ygcPlaceholder = '回复:@' + name
				} else {
					this.ygcPlaceholder = '发布评论'
				}
				if (data) {
					this.sendData = data
				}
				this.commentLvl = v

				this.$refs.msgInputRef.focus();
				//this.$refs.ygcComment.toggleMask('show');
			},
			// 发送评论
			pubComment(v) {
				if (this.commentLvl == 1) {
					this.$emit('commentOne', v)
					this.$refs.msgInputRef.blur();
					//this.$refs.ygcComment.toggleMask();
				} else {
					this.$emit('commentTwo', {
						content: v,
						data: this.sendData
					})
					this.$refs.msgInputRef.blur();
					//this.$refs.ygcComment.toggleMask();
				}

			},
			//获取更多
			getMore() {
				// this.$emit('getMore', {})
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pagesA/login/login'
					});
					return false;
				}
				uni.navigateTo({
					url: '/pagesA/comment-all/comment-all?id='+this.pid+'&type='+this.type
				});
			},

			openPup(data) {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pagesA/login/login'
					});
					return false;
				}
				this.sendData = data;
				this.$refs.popup.open();
				if(data.linkUserId == uni.getStorageSync('userInfo').userId){
					this.sendData.canDel = true
				}
			},
			closePup() {
				this.$refs.popup.close();
			},
			openPuptTip() {
				this.$refs.popuptTip.open();
				this.closePup()
			},
			closePuptTip() {
				this.$refs.popuptTip.close();
				this.reportTxt= ''
				this.reportType= 1
			},
			//删除
			del() {
				console.log('删除了',this.sendData)
				if(this.sendData.tags.garde === 1){
					if(!this.mainAccount){
						uni.showToast({
							title:'子账号没有权限',
							icon:'none'
						})
						return false
					}
				}
				if(this.sendData.tags.garde === 2){
					if(!this.mainAccount){
						uni.showToast({
							title:'子账号没有权限',
							icon:'none'
						})
						return false
					}
				}
				this.$emit('del',this.sendData)
			},
			//选择举报类型
			checkReport(v) {
				this.reportType = v
			},
			//提交举报
			report(){
				if(this.reportType==4){
					this.$emit('report',{content:this.reportTxt,data:this.sendData})
				}else{
					let temp = this.reportData.filter(v=>{
						console.log(this.reportType)
						return v.value == this.reportType  
					})
					this.$emit('report',{content:temp[0].name,data:this.sendData})
				}
			},

			Thumb(v) {
				this.$emit('toThumb',v)
			},
		}
	}
</script>

<style lang="less">
	.comment-list {
		// padding: 0 32upx 20upx;
		// margin-bottom: 24upx;
		background-color: #fff;

		.comment-warp {
			text-align: center;
			padding: 68upx 0 65upx 0;

			image {
				width: 142upx;
				height: 134upx;
			}

			view {
				color: #A3A3A3;
				font-size: 26upx;
				text-align: center;

				span {
					color: #196DEC;
					font-size: 26upx;
				}
			}
		}

		
		.item {

			display: flex;
		
		
			.l {
				width: 52upx;
				height: 52upx;
				border-radius: 52upx;
				overflow: hidden;
				margin-top: 20upx;
			}

			.r {
				display: flex;
				flex-direction: column;
				flex: 1;
				padding-left: 20upx;
				border-bottom: 0.5upx solid #EBEBEB;
				.write {
					margin-top: 20upx;
					width: 608upx;
					height: 68upx;
					background: rgba(245, 245, 245, 1);
					color: #A3A3A3;
					line-height: 68upx;
					padding-left: 30upx;
					font-size: 26upx;
					margin-bottom: 20upx;
				}

				.comment_sec {
					display: flex;
					height: 0;
					overflow: hidden;
					transform: .5s;



					&:nth-last-child(1) {
						.r {
							border-bottom: none;
						}
					}
				}

				.show {
					height: auto;

					&:nth-child(2) {
						border-top: 0.5upx solid #EBEBEB;
					}
				}


				view {
					line-height: normal;
				}

				.name_rate {
					font-size: 28upx;
					margin-top: 28upx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.name {
						display: flex;
						color: #444;

						align-items: center;

						image {
							height: 30upx;
							width: 62upx;
							margin-left: 14upx;
						}

						.time {
							color: #A3A3A3;
							font-size: 24upx;
							margin-left: 14upx;
						}
					}

					.good {

						text-align: right;
						font-size: 24upx;
						color: #A3A3A3;

						image {
							width: 28upx;
							height: 28upx;
							margin-right: 6upx;
							vertical-align: top;
							display: inline-block;
						}
					}

				}

				.notes {
					font-size: 28upx;
					color: #444;
					margin-top: 16upx;
					width: 100%;
					white-space: pre-wrap;
					word-break: break-all;
				}

				.keyWords {
					color: #486B9D;
					font-size: 24upx;
					margin: 22upx 0;
					display: flex;
					align-items: center;

					.keyWordsL {
						flex: 1;
					}

					text {
						flex: 1;
						margin-right: 14upx;
					}

					.more {
						color: #A3A3A3;
						font-size: 22upx;
						font-weight: bold;
					}

				}

				.createDate {
					color: #A3A3A3;
					font-size: 24upx;
					margin-bottom: 24upx;
				}
			}
		
		}

		
		.item:nth-last-child(1) {
			border-bottom: none;
		}

		.getMore {
			margin: 20upx auto 0;
			width: 670upx;
			height: 84upx;
			background: rgba(243, 247, 251, 1);
			color: #486B9D;
			font-size: 28upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.nomore {
			color: #A3A3A3;
			font-size: 24upx;
			text-align: center;
			margin: 36upx 0 16upx;
		}

		.popup-win {
			background: rgba(255, 255, 255, 1);
			border-radius: 20px 20px 0px 0px;
			padding-bottom: 70upx;
			margin-bottom: -70upx;
			z-index: 9999;

			view {
				height: 128upx;
				border-bottom: .5upx solid #F5F5F5;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #444444;
				font-size: 34upx;

				&:nth-last-child(1) {
					border-bottom: none;
				}
			}
		}

		.popuptip-win {
			width: 640upx;
			height: auto;
			background: rgba(255, 255, 255, 1);
			border-radius: 24upx;
			padding: 54upx 48upx;

			.popuptip-win-title {
				color: #333333;
				font-size: 36upx;
				font-weight: bold;
			}

			.popuptip-win-check {
				display: flex;
				flex-wrap: wrap;
				margin-top: 56upx;

				.popuptip-win-check-item {
					width: 50%;
					display: flex;
					align-items: center;
					font-size: 30upx;
					color: #444;
					margin-bottom: 45upx;
					icon{
						margin-right: 20upx;
					}
				}
			}
			textarea{
				width:488upx;
				height:145upx;
				border:1upx solid rgba(163,163,163,1);
				padding: 32upx 28upx;
				margin-bottom: 52upx;
			}
			.popuptip-win-btn{
				display: flex;
				justify-content: space-between;
				
				.popuptip-win-btn-l{
					font-size: 30upx;
					display: flex;
					align-items: center;
					justify-content: center;
					width:248upx;
					height:84upx;
					background:rgba(233,242,254,1);
					border-radius:4upx;
					color: #196DEC;
				}
				.popuptip-win-btn-r{
					font-size: 30upx;	
					display: flex;
					align-items: center;
					justify-content: center;
					width:248upx;
					height:84upx;
					background:#008BFF;
					border-radius:4upx;
					color: #fff;	
					
				}
				
				
			}
		}
	}
	.comment-list .comment_fir:nth-last-child(4)>.r{
		border-bottom: none;
	}
</style>
